{% extends "_layouts/examples.html" %}
{% block title %}Badge / Chips{% endblock %}

{% block standalone_css %}patterns_badge{% endblock %}

{% block content %}
<button class="p-chip">
    <span class="p-chip__value">Users</span>
    <span class="p-badge" aria-label="9 users exist">9</span>
</button>

<button class="p-chip">
    <span class="p-chip__value">Users</span>
    <span class="p-badge" aria-label="more than 999 users exist">999+</span>
</button>

<button class="p-chip">
    <span class="p-chip__value">Users</span>
    <span class="p-badge" aria-label="approximately 1 million users exist">1M</span>
</button>

<button class="p-chip">
    <span class="p-chip__value">Users</span>
    <span class="p-badge" aria-label="approximately 2.5 billion users exist">2.5B</span>
</button>

<button class="p-chip">
    <span class="p-chip__value">Users</span>
    <span class="p-badge" aria-label="approximately 25 thousand users exist">25k</span>
</button>
{% endblock %}
